<template>
  <div class="app-container">

    <el-row :gutter="10" style="margin:0;" justify="end">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-col :span="5">
          <el-form-item label="园区" prop="parkId" label-width="50px">
            <el-cascader v-model="formData.parkId" :options="parkIdOptions" :props="parkIdProps"
              :style="{ width: '100%' }" placeholder="请选择园区" @change="handleChange"></el-cascader>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>

    <el-row :gutter="10" class="mb8" style="margin:0 0 20px;">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-building" size="mini" @click="distributeDormitory">分配宿舍
        </el-button>
        <el-button type="success" plain icon="el-icon-building" size="mini" @click="unbindDormitory">批量取消分配
        </el-button>
        <el-button type="success" plain icon="el-icon-s-promotion" size="mini" @click="fastVClick">点我进行快捷分配
        </el-button>
        <el-button type="success" plain icon="el-icon-download" size="mini" @click="doExport">导出新生分配计划汇总表
        </el-button>
        <el-button type="success" plain icon="el-icon-lock" size="mini" @click="lockAllDept">锁定全部分配学院
        </el-button>
      </el-col>
      <right-toolbar @queryTable="getDormitory"></right-toolbar>
    </el-row>
    <!-- 查看学院-->
    <div class="top" style="margin:0 0 20px;">
      <el-card style="cursor: pointer;margin-top: 10px;" class="box-card" v-for="(item, index) in collegeList"
        :key="index" shadow="never" :class="{ 'active': isSelected(item.XYDM) }"
        @click.native="selectCollege(item.XYDM)">
        <div class="text item">
          {{ '学院名称：' + item.XY }}
        </div>
        <div class="text item">
          {{ '学院代码：' + item.XYDM }}
        </div>
      </el-card>
    </div>

    <div>
      <div class="building">
        <el-button style="margin: 0px 10px 10px 0;" v-for="(item, index) in buildingList" :key="index"
          :type="queryParams.buildingId == item.id ? 'primary' : ''" @click="selectBuildingId(item.id)">{{
            item.name
          }}
        </el-button>
      </div>

      <div style=" display: flex;" class="main">
        <!-- 楼层 -->
        <div class="floor">
          <el-button style="margin: 0px 10px 10px 0;" v-for="(item, index) in floorList" :key="index"
            :type="queryParams.floorId == item.id ? 'primary' : ''" @click="selectFloor(item.id)">{{
              item.floor
            }} 楼
          </el-button>
        </div>

        <el-table v-loading="loading" :data="dormitoryList" @selection-change="handleSelectionChange">
          <el-table-column :selectable="checkSelectSet" type="selection" width="55" align="center" />
          <el-table-column label="宿舍号" align="center" prop="roomNo" />
          <el-table-column label="性别" align="center" prop="gender" />
          <el-table-column label="已分配学院" align="center" prop="selected" width="400">
            <template slot-scope="scope">
              <div slot="reference">
                <el-row>
                  <el-col :span="20">
                    <div v-for="item in scope.row.selected" :key="item.id">
                      {{ item.XY }} ({{ item.bed_count }}人)
                      <el-button v-if="item.is_lock != '1'" size="mini" @click="cancelDept(item)"
                        icon="el-icon-circle-close" type="text">取消分配</el-button>
                      <el-button v-if="item.is_lock != '1'" size="mini" @click="lockDept(item)" icon="el-icon-lock"
                        type="text">锁定</el-button>
                      <el-button v-if="item.is_lock == '1'" :disabled="item.is_lock == '1'" size="mini"
                        icon="el-icon-lock" type="text">已锁定</el-button>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <el-button size="mini" v-if="scope.row.selected.length > 0"
                      @click="changeBedCount(scope.row)">调整</el-button>
                  </el-col>
                </el-row>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="入住人数" align="center" prop="occupancy">
            <template slot-scope="scope">
              {{ scope.row.occupancy }}
            </template>
          </el-table-column>
          <el-table-column label="剩余床位数" align="center" prop="bedNum" />
        </el-table>
      </div>
    </div>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getDormitory" />

    <dormitory-operation :is-open="isOpen" :list-of-colleges="listOfColleges" @update:visible="handleDialogClose" />

    <el-dialog title="调整宿舍床位分配" :visible.sync="changeBedCountV">
      <el-form>
        <el-form-item label="剩余床位数" label-width="120px">
          <el-input v-model="changeBedDisForm.canBed" readonly></el-input>
        </el-form-item>
        <el-form-item :label="v.XY" label-width="240px" v-for="(v, i) in changeBedDisForm.depts" :key="i">
          <el-input :disabled="v.is_lock == '1'" v-model="v.bedCount" type="number"></el-input>
        </el-form-item>
        <el-form-item label="" label-width="120px">
          <el-button @click="saveChangeBed">保存</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>

    <el-dialog title="进行快捷分配宿舍" :visible.sync="fastV" width="90%" :append-to-body="true">
      <el-row>
        <el-col :span=12 style="border-right: 1px dotted lightgray;">
          <el-form label-width="120px">
            <el-form-item label="学院">
              <el-select v-model="fastForm.deptCode">
                <el-option v-for="(v, i) in collegeList" :label="v.XY" :value="v.deptCode" :key="i"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="年级">
              <el-select v-model="fastForm.gradeCode">
                <el-option v-for="(v, i) in grade_list" :label="v.gradeName" :value="v.gradeCode" :key="i"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="校区">
              <el-select @change="changeCampus" v-model="fastForm.campusId">
                <el-option v-for="(v, i) in campus_list" :label="v.name" :value="v.id" :key="i"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="园区">
              <el-select placeholder="请先选择校区再选择园区" @change="changePark" v-model="fastForm.parkId">
                <el-option v-for="(v, i) in park_list" :label="v.name" :value="v.id" :key="i"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="楼栋">
              <el-select placeholder="请先选择园区再选择楼栋" @change="changeBuilding" v-model="fastForm.buildingId">
                <el-option v-for="(v, i) in building_list" :label="v.name" :value="v.id" :key="i"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="楼层">
              <el-select placeholder="请先选择楼栋再选择楼层" @change="changeFloor" v-model="fastForm.floorId">
                <el-option v-for="(v, i) in floor_list" :label="v.floor" :value="v.id" :key="i"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="房间">
              <el-select @change="changeRoom" :multiple="true" placeholder="请先选择楼层再选择房间" v-model="fastForm.dormitoryId">
                <el-option v-for="(v, i) in room_list" :label="v.roomNo" :value="v.id" :key="i"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="">
              <el-button @click="doFast">分配</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span=12>
          <el-row>
            <el-col :span="8" v-for="(v, i) in dept_count" :key="i">
              <div
                style="margin: 0.5rem;border: 1px solid lightskyblue;padding: 2rem 0.5rem 2rem 0.5rem;text-align: center;border-radius: 1rem;">
                {{ v.deptName }}<br />
                已分配床位数:{{ v.bedCount }} <br />
                <el-button type="text" @click="lookDetail(v.XYDM)">查看详情</el-button>
              </div>
            </el-col>
          </el-row>
        </el-col>

      </el-row>

    </el-dialog>

    <el-dialog :visible.sync="detailV" title="学院详情" :append-to-body="true" :destroy-on-close="true">
      <el-row>
        <el-col :span="8" v-for="(v, i) in detail_list" :key="i"
          style="text-align: center;border: 1px solid lightblue; margin: 0.5rem;border-radius: 0.5rem;padding: 2rem 0.5rem 2rem 0.5rem;">
          {{ v.deptName }} <br />
          {{ v.parkName }} <br />
          {{ v.buildingName }} <br />
          {{ v.bedCount }} 个床位
        </el-col>
      </el-row>
    </el-dialog>


  </div>
</template>

<script>
import {
  assCollegeDormitory,
  listBuilding,
  getCollege,
  listDormitory,
  listFloor,
  listCampus,
  listPark,
  unbindDor,
  changeDeptBed,
  doFast,
  getDeptBedCount,
  getDeptDetail,
  exportSum,
  cancelDept,
  lockDept,
  lockAllDept,
} from '@/api/dormitory/dormitory-assignment/ass-college-dormitory';

import DormitoryOperation from '@/views/dormitory/dormitory-assignment/components/DormitoryOperation.vue';

import { listAllCampus, listParkByCampus, listBuildingByPark, listFloorByBuilding, listRoomByFloor } from "@/api/dormitory/basedata/dormitory"
import { listNowGrade } from "@/api/stuCQS/basedata/grade";

import { fullLoading, isEmpty } from "@/api/helpFunc";

import * as XLSX from 'xlsx';
import { workbook2blob, openDownloadDialog, file2Xce, workbook2blobStyle } from "@/api/helpFunc";

import lodash from "lodash";

export default {
  name: 'SRSUiAssDormitoryBedView',
  components: {
    DormitoryOperation
  },

  data() {
    return {

      changeBedCountV: false,
      changeBedDisForm: {
        canBed: 0,
        depts: []
      },


      isOpen: false,
      listOfColleges: {},
      formData: {
        parkId: []
      },
      rules: {
        parkId: [{
          required: true,
          type: 'array',
          message: '请至少选择一个parkId',
          trigger: 'change'
        }]
      },
      parkIdOptions: [],
      parkIdProps: {
        'multiple': false
      },
      // 专业人数列表
      collegeList: [],
      // 单元列表
      selectdList: [],
      floorList: [],
      // 参数
      queryParams: {
        buildingId: null,
        floorId: null,
        unitId: null,
        pageSize: 10,
        pageNum: 1
      },
      dormitoryList: [],
      loading: false,
      collegeCode: [],
      total: 0,
      dormIds: [],
      // 宿舍楼列表
      buildingList: [],

      fastV: false,
      fastForm: {
        deptCode: null,
        gradeCode: null,

        campusId: null,
        parkId: null,
        buildingId: null,
        floorId: null,
        dormitoryId: []
      },
      grade_list: [],
      campus_list: [],
      park_list: [],
      building_list: [],
      floor_list: [],
      room_list: [],

      dept_count: [],
      detailV: false,
      detail_list: [],
    }
  },

  mounted() {
    this.getCollegeList()
    this.getParkIdOptions()
  },

  methods: {
    async lockAllDept() {
      this.$confirm("请确定要锁定全部分配学院吗?锁定后不可调整。", '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let loading = fullLoading(this);
        let res = await lockAllDept();
        loading.close();
        if (res.code == 200) {
          this.$message.success(res.msg);
          this.getDormitory();
        }

      }).catch(() => {

      });
    },

    checkSelectSet(row, index) {
      let dont_lock = true;
      let select = [...row.selected];
      select.map(x => {
        if (x.is_lock == '1') {
          dont_lock = false;
        }
      });

      return dont_lock;
    },

    async doExport() {
      let loading = fullLoading(this);
      let res = await exportSum();
      loading.close();
      if (res.code == 200) {
        let data = [...res.data];
        data.map(x => {
          if (isEmpty(x.classSum)) {
            x.classSum = '暂无';
          }
        });
        const header = ['deptName', 'campusName', 'parkName', 'buildingName', 'roomNo', 'bedCount', 'classSum'];
        const header_zh = {
          "campusName": "校区",
          "parkName": "园区",
          "buildingName": "楼栋",
          "roomNo": "宿舍号",
          "bedCount": "分配的床位",
          "classSum": "分配的班级",
          'deptName': "分配的学院"
        };

        const arrayWithHeader = [header_zh, ...data];

        var sheet1 = XLSX.utils.json_to_sheet(arrayWithHeader,
          {
            header: header,
            skipHeader: true
          });
        sheet1["!cols"] = [
          { wch: 20 },
          { wch: 20 },
          { wch: 40 },
          { wch: 10 },
          { wch: 10 },
          { wch: 10 },
          { wch: 40 },
        ];

        sheet1['!merges'] = [];

        let tempFdy = null;
        let tempStart = 1;
        let tempEnd = 1;


        for (let i = 1; i < data.length; i++) {
          if (i == 1) {
            tempFdy = data[i].deptName;
          }

          if (data[i].deptName != tempFdy && i != 1) {
            tempFdy = data[i].deptName;
            tempEnd = i;

            let row = { s: { r: tempStart, c: 0 }, e: { r: tempEnd, c: 0 } };
            sheet1['!merges'].push(row);

            tempStart = i + 1;
          }
        }



        // 创建一个新的空的workbook
        var wb = XLSX.utils.book_new();


        let range = XLSX.utils.decode_range(sheet1['!ref']);

        let headerStyle = {
          border: {
            top: {
              style: 'thin',
              color: {
                auto: 1
              }
            },
            left: {
              style: 'thin',
              color: {
                auto: 1
              }
            },
            right: {
              style: 'thin',
              color: {
                auto: 1
              }
            },
            bottom: {
              style: 'thin',
              color: {
                auto: 1
              }
            }
          },
          alignment: { horizontal: 'center', vertical: 'center' }
        };

        for (let i = 1; i < data.length + 1; i++) {
          for (var col = range.s.c; col <= range.e.c; col++) {
            var cell = sheet1[XLSX.utils.encode_cell({ r: i, c: col })];
            cell.s = headerStyle;
            cell.v = cell.v;
            cell.t = 's'; // 强制将单元格类型设置为字符串
          }
        }


        // 为每一个工作簿设置名称并添加到workbook（excel表）中
        XLSX.utils.book_append_sheet(wb, sheet1, "新生分配计划汇总表");
        const workbookBlob = workbook2blobStyle(wb);  // 辅助函数workbook2blob
        // 下载文档并添加文件名称
        openDownloadDialog(workbookBlob, "新生分配计划汇总表.xlsx");
      }
    },

    async lockDept(val) {
      let sdata = {
        xydm: val.dept_code,
        dormitoryId: val.dormitory_id
      }


      this.$confirm("请确定要锁定这个分配吗?锁定后不可调整。", '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {


        let loading = fullLoading(this);
        let res = await lockDept(sdata);
        loading.close();
        if (res.code == 200) {
          this.$message.success(res.msg);
          this.getDormitory();
        }

      }).catch(() => {

      });
    },

    async cancelDept(val) {
      let sdata = {
        xydm: val.dept_code,
        dormitoryId: val.dormitory_id
      }

      this.$confirm("请确定要取消分配吗", '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {


        let loading = fullLoading(this);
        let res = await cancelDept(sdata);
        loading.close();
        if (res.code == 200) {
          this.$message.success(res.msg);
          this.getDormitory();
        }

      }).catch(() => {

      });

    },


    async lookDetail(deptCode) {
      let loading = fullLoading(this);
      let res = await getDeptDetail(deptCode);
      loading.close();
      if (res.code == 200) {
        this.detail_list = [...res.data];
        this.detailV = true;
      }
    },


    async getDeptBedCount() {
      let loading = fullLoading(this);
      let res = await getDeptBedCount();
      loading.close();
      if (res.code == 200) {
        this.dept_count = [...res.data];
      }
    },
    async doFast() {
      let sdata = lodash.cloneDeep(this.fastForm);
      if (isEmpty(sdata.deptCode)) {
        this.$message.info("请选择学院");
        return;
      }
      if (isEmpty(sdata.gradeCode)) {
        this.$message.info("请选择年级");
        return;
      }
      if (isEmpty(sdata.campusId)) {
        this.$message.info("请选择校区");
        return;
      }
      if (isEmpty(sdata.parkId)) {
        this.$message.info("请选择园区");
        return;
      }
      if (isEmpty(sdata.buildingId)) {
        this.$message.info("请选择楼栋");
        return;
      }
      if (isEmpty(sdata.floorId)) {
        this.$message.info("请选择楼层");
        return;
      }
      if (isEmpty(sdata.dormitoryId)) {
        this.$message.info("请选择宿舍");
        return;
      }

      let deptName = [...this.collegeList].filter(x => { return x.deptCode == sdata.deptCode })[0].deptName;
      let gradeName = [...this.grade_list].filter(x => { return x.gradeCode == sdata.gradeCode })[0].gradeName;
      let campusName = [...this.campus_list].filter(x => { return x.id == sdata.campusId })[0].name;
      let parkName = [...this.park_list].filter(x => { return x.id == sdata.parkId })[0].name;
      let buildingName = [...this.building_list].filter(x => { return x.id == sdata.buildingId })[0].name;
      let floor = [...this.floor_list].filter(x => { return x.id == sdata.floorId })[0].floor;
      let roomNos = [...this.room_list].filter(x => { return sdata.dormitoryId.includes(x.id) });
      let roomNo = roomNos.map(x => { return x.roomNo });

      let alertMsg = "您确定要把校区为 " + campusName + " 园区为 " + parkName + " 楼栋为 " + buildingName + " 楼层为 " + floor + "层的 " + roomNo + "房间 分配给" + deptName + gradeName + "新生吗?此操作将会覆盖之前房间已分配的记录。";

      this.$confirm(alertMsg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {


        let loading = fullLoading(this);
        let res = await doFast(sdata);
        loading.close();
        if (res.code == 200) {
          this.$message.success(res.msg);
          this.getDormitory();
          this.getDeptBedCount();
        }

      }).catch(() => {

      });


    },
    fastVClick() {
      this.getDeptBedCount();
      this.listNowGrade();
      this.listAllCampus();
      this.fastV = true;
    },

    async listNowGrade() {
      let res = await listNowGrade();
      if (res.code == 200) {
        this.grade_list = [...res.data];
      }
    },

    async listAllCampus() {
      let res = await listAllCampus();
      if (res.code == 200) {
        this.campus_list = [...res.data];
      }
    },
    async changeCampus() {
      this.fastForm.parkId = null;
      this.fastForm.buildingId = null;
      this.fastForm.floorId = null;
      this.fastForm.dormitoryId = [];

      let loading = fullLoading(this);
      let res = await listParkByCampus(this.fastForm.campusId);
      loading.close();
      if (res.code == 200) {
        this.park_list = [...res.data];
      }
    },
    async changePark() {
      this.fastForm.buildingId = null;
      this.fastForm.floorId = null;
      this.fastForm.dormitoryId = [];

      let loading = fullLoading(this);
      let res = await listBuildingByPark(this.fastForm.parkId);
      loading.close();
      if (res.code == 200) {
        this.building_list = [...res.data];
      }
    },
    async changeBuilding() {
      this.fastForm.floorId = null;
      this.fastForm.dormitoryId = [];

      let loading = fullLoading(this);
      let res = await listFloorByBuilding(this.fastForm.buildingId);
      loading.close();
      if (res.code == 200) {
        let temp = [
          {
            floor: "所有",
            id: -1
          },
          ...res.data
        ]
        this.floor_list = [...temp];
      }
    },
    async changeFloor() {
      this.fastForm.dormitoryId = [];

      let loading = fullLoading(this);
      let res = await listRoomByFloor(this.fastForm.floorId);
      loading.close();
      if (res.code == 200) {
        let temp = [
          {
            roomNo: "所有",
            id: -1
          },
          ...res.data
        ]
        this.room_list = [...temp];
      }
    },
    changeRoom(val) {
      val.map(x => {
        if (x == -1) {
          this.fastForm.dormitoryId = [-1];
        }
      });
    },




    async saveChangeBed() {
      let sdata = [...this.changeBedDisForm.depts];
      let can = this.changeBedDisForm.canBed;
      let tempTotal = 0;
      let isZero = false;
      sdata.map(x => {
        x.bedCount = parseInt(x.bedCount);
        if (x.bedCount == 0) {
          this.$message.info("不能为0");
          isZero = true;
        }
        tempTotal += x.bedCount;
      });
      if (isZero) {
        return;
      }
      if (tempTotal > can) {
        this.$message.info("分配的床位数量大于可用床位数量");
        return;
      }
      let loading = fullLoading(this);
      let res = await changeDeptBed(sdata)
      loading.close();
      if (res.code == 200) {
        this.$message.success(res.msg);
        this.changeBedCountV = false;
        this.getDormitory();
      }
    },
    changeBedCount(room) {
      this.changeBedDisForm.canBed = room.bedNum - room.occupancy;
      this.changeBedCountV = true;
      let depts = []
      room.selected.map(x => {
        let temp = {
          XY: x.XY,
          xydm: x.dept_code,
          dormitoryId: x.dormitory_id,
          bedCount: x.bed_count,
          is_lock: x.is_lock,
        };
        depts.push(temp);
      });
      this.changeBedDisForm.depts = [...depts];
    },

    handleChange(value) {
      this.getBuilding(value[1])
    },
    handleDialogClose(newValue) {
      this.isOpen = newValue
    },
    handleUpdate(row) {
      this.listOfColleges = row
      this.isOpen = true
    },

    getParkIdOptions() {
      // 发起请求获取数据
      listCampus().then(res => {
        res.data.forEach(i => {
          this.getPark(i.id).then(res1 => {
            let children = res1
            let option = {
              value: i.id,
              label: i.name,
              children
            }
            // 将 option 添加到 parkIdOptions 中
            this.parkIdOptions.push(option)

            // 如果 parkIdOptions 为空，将第一个元素的 value 和 children 添加到 parkId 中
            if (this.parkIdOptions.length === 1) {
              this.formData.parkId.push(option.value)
              this.formData.parkId.push(option.children[0].value)
              this.getBuilding(option.children[0].value)
            }
          })
        })
      })
    },

    getPark(campusId) {
      return listPark({
        campusId
      }).then(res => {
        let children = []
        res.rows.forEach(r => {
          children.push({
            value: r.id,
            label: r.parkName
          })

        })
        return children
      })
    },

    // 获取学院信息
    getCollegeList() {
      getCollege().then(res => {
        this.collegeList = res.data;
        this.collegeList.forEach(item => {
          item.XY = item.deptName;
          item.XYDM = item.deptCode;
        })
      })
    },
    // 获取楼层
    getFloorList() {
      listFloor(this.queryParams).then(res => {
        this.floorList = res.rows
        this.queryParams.floorId = res.rows[0].id
        this.getDormitory()

      })
    },
    // 查询宿舍楼
    getBuilding(parkId) {
      listBuilding({
        parkId
      }).then(res => {
        this.buildingList = res.rows
        this.queryParams.buildingId = res.rows[0].id
        this.getFloorList()
      })
    },
    // 根据楼栋id查看宿舍
    getDormitory() {
      this.loading = true
      this.selectdList = []
      listDormitory(this.queryParams).then(res => {
        this.total = res.total
        this.dormitoryList = res.rows
        res.rows.forEach(r => {
          let selected = []
          selected = r.selected.slice(0, 2)
          this.selectdList.push(selected)

        })
        this.loading = false
      })
    },
    // 获取宿舍楼id
    selectBuildingId(id) {
      this.queryParams.buildingId = id
      this.getFloorList()
    },
    // 获取楼层id
    selectFloor(id) {
      this.queryParams.floorId = id
      this.getDormitory()
    },
    // 分配宿舍
    distributeDormitory() {

      let sdata = {
        dormIds: this.dormIds,
        xydm: this.collegeCode
      };
      assCollegeDormitory(sdata).then(res => {
        if (res.code === 200) {
          this.$message.success('分配成功!');
          this.collegeCode = [];
          this.getDormitory();
          return
        }
      })

    },
    // 选择的学院
    selectCollege(code) {
      if (!this.collegeCode.includes(code)) return this.collegeCode.push(code)
      this.collegeCode = this.collegeCode.filter(i => i !== code)
    },
    // 返回选中状态
    isSelected(code) {
      return this.collegeCode.includes(code)
    },
    // 查看未分配宿舍
    showNolive() {

    },
    // 选择宿舍
    selectDormitory(id) {
      if (!this.dormIds.includes(id)) return this.dormIds.push(id)
      // 删除重复的id
      this.dormIds = this.dormIds.filter(item => item !== id)

    },
    // 多选框数据
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.dormIds = selection.map(item => item.id)
    },
    // 取消绑定某宿舍
    unbindDormitory() {
      if (this.dormIds.length == 0) {
        this.$message.info("请选择需要取消分配的宿舍");
        return;
      }
      if (this.collegeCode.length == 0) {
        this.$message.info("请选择需要取消分配的学院");
        return;
      }

      let data = {
        dormitoryIds: this.dormIds,
        academyCode: this.collegeCode
      }
      if (!this.dormIds) {
        this.$message.warning('请先选择需要解除绑定的宿舍')
      } else {
        unbindDor(data).then(res => {
          this.$message.success(res.msg)
          if (res.code == 200) this.collegeCode = []
          this.getDormitory()
          this.getCollegeList()
        })
      }
    },
  },
  filters: {
    filterState(value) {
      if (!value) return '已分配'
      return '待分配'
    },
    filterUnit(value) {
      if (value == 'default') return '默认单元'
      return value
    },
    filterClass(value) {
      if (!value) return '暂无居住'
      return '已分配居住'
    },
    filterSelected(value) {
      value.forEach(e => {
        return e.XY
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  display: flex;
  flex-wrap: wrap;

  .box-card {
    min-width: 180px;
    margin-right: 20px;
    min-height: 100px;
  }
}

.unit {
  display: flex;
  flex-wrap: wrap;
}

.main {
  .box-card {
    width: 180px;
  }
}

.floor {
  display: flex;
  flex-direction: column;
  width: 90px;
}

.condition-selection {
  margin-top: 20px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

#active,
.active {
  box-shadow: 0px 0px 8px 2px rgba(0, 120, 255, 0.5);
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
</style>
